import React, { Component } from 'react';

import "../../styles/classification/MyMain.css"
// 引入请求
import { CategorySubcate, CateGoryList } from "../../api/classification";


class MyMain extends Component {
    constructor(props) {
        super(props)
        this.state = {
            FenLei: [],
            rightList: [],
            currentIndex: 0,
        }
    }


    handClick(index, id) {
        this.setState({ currentIndex: index })
        CategorySubcate({ id }).then((res) => {
            console.log(res.data);
            this.setState({ rightList: res.data.subcate.subcategory })
        })

    }

    componentDidMount() {
        CateGoryList().then((res) => {
            console.log(res.data.list);
            this.setState({ FenLei: res.data.list })

            CategorySubcate({ id: res.data.list[0].id }).then((data) => {
                console.log(data.data.subcate.subcategory);
                this.setState({ rightList: data.data.subcate.subcategory })
            })
        })


    }


    render() {
        return (
            <div className='main'>
                <div className='leftlist'>
                    {
                        this.state.FenLei.map((item, index) => {
                            return (<div className={`list ${index === this.state.currentIndex ? "active" : ""}`} key={item.id} onClick={() => { this.handClick(index, item.id) }}>
                                <p>{item.name}</p>
                            </div>)
                        })
                    }
                </div>
                <div className='rightlist'>
                    {
                        this.state.rightList.map((item, index) => {
                            return (
                                <div key={index}>
                                    <h4>{item.name}</h4>
                                    <div className="list">
                                        {
                                            item.subNavs.map((item, index) => {
                                                return (
                                                    <div className='inlist' key={index}>
                                                        <img src={item.pic} alt="" />
                                                        <p>{item.name}</p>
                                                    </div>)
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyMain;